<template>
  <div class="container-song-list">
    <x-tabs
      v-model="current"
      @change="handleChange($route.query.keyword)"
      :list="[
        { label: '歌曲', id: 0 },
        { label: '歌手', id: 1 }
      ]"
      :config="{ type: 'card', tabPosition: 'top' }"
    >
      <song-list :list="dataList"></song-list>
    </x-tabs>
  </div>
</template>

<script>
import emitter from '@/utils/event'
import {  reactive, ref, toRefs } from 'vue'
import * as axiosApi from './api'
export default {
  setup() {
    const dataList=ref([])
    const _data = reactive({
      current: 0
    })
    emitter.all.clear()
    emitter.on('search', keyword => {
      handleChange(keyword)
    })
    function handleChange(keyword) {
      axiosApi.searchList({ type: _data.current, keyword }).then(res => {
        dataList.value = res.data.content
      })
    }
    return {
      ...toRefs(_data),
      dataList,
      handleChange
    }
  }
}
</script>

<style lang="scss" scoped>
.container-song-list {
}
</style>
